<template>
	<a-modal v-bind="$props" v-on="$listeners" :maskClosable="maskClosable" :width="customizeWidth" v-drag-modal>
		<template v-for="(item, index) in slotlist" :slot="item">
			<slot :name="item">{{ item }}</slot>
		</template>
	</a-modal>
</template>

<script>
import { Modal } from 'ant-design-vue';
const sizeObj = { mini: 650, small: 750, medium: 900 };
export default {
	name: 'globalModal',
	props: {
		...Modal.props,
		// 点击蒙层是否允许关闭
		maskClosable: {
			type: Boolean,
			default: false
		},
		destroyOnClose: {
			type: Boolean,
			default: true
		},
		// 大小设置 mini / small / medium
		size: {
			type: String,
			default: ''
		},
		// 宽度 520 / 650 / 750 / 900
		width: {
			type: Number,
			default: 750
		},
		bodyStyle: {
			type: Object,
			default: () => {
				return {
					maxHeight: '450px',
					minHeight:'200px',
					overflow: 'auto'
				};
			}
		}
	},
	data() {
		return {
			customizeWidth: this.width,
			slotlist: []
		};
	},
		
	mounted() {
		this.setWidth();
		if (this.$slots) {
			let slotlist = [];
			for (var key in this.$slots) {
				slotlist.push(key);
			}
			this.slotlist = [...slotlist];
		}
	},
	methods: {
		// 设置宽度
		setWidth() {
			Object.keys(sizeObj).forEach(key => {
				if (key === this.size) this.customizeWidth = sizeObj[key];
			});
		}
	}
};
</script>
<style type="text/css" lang="less">
</style>
